<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- 
        我们会把页面的不同部分拆分成独立的组件，然后在不同页面就可以共享这些组件，避免重复开发。在 vue 里，所有的 vue 实例都是组件。
        1. 全局组件：我们通过 Vue 的 component 方法来定义一个全局组件。
                1.1 组件其实也是一个 Vue 实例，因此它在定义时也会接收：data、methods、生命周期函数等
                1.2 不同的是组件不会与页面的元素绑定，否则就无法复用了，因此没有 el 属性。
                1.3 但是组件渲染需要 html 模板，所以增加了 template 属性，值就是 HTML 模板
                1.4 全局组件定义完毕，任何 vue 实例都可以直接在 HTML 中通过组件名称来使用组件了
                1.5 data 必须是一个函数，不再是一个对象。
        
        2. 局部组件：一旦全局注册，就意味着即便以后你不再使用这个组件，它依然会随着 Vue 的加载而加载。因此，对于一些并不频繁使用的组件，我们会采用局部注册。
                    我们先在外部定义一个对象，结构与创建组件时传递的第二个参数一致。components 就是当前 vue 对象子组件集合。其 key 就是子组件名称。
                    其值就是组件对象名。效果与刚才的全局注册是类似的，不同的是，这个 counter 组件只能在当前的 Vue 实例中使用。
     -->
    
    <div id="app">
        <button v-on:click="count++">我被点击了 {{count}} 次</button>
        <counter></counter>
        <con></con>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        // 1. 全局声明注册一个组件
        Vue.component("counter", {
            template: '<button v-on:click="count++">我被点击了 {{count}} 次</button>',
            data() {
                return {
                    count : 0
                }
            },
        });

        // 2. 声明一个对象
        const con = {
            template: '<button v-on:click="count++">我被点击了 ~~ {{count}} 次</button>',
            data() {
                return {
                    count : 0
                }
            }
        }

        new Vue({
            el: "#app",
            data: {
                count: 1
            },
            components: {
                // 将定义的对象注册为组件
                con: con
            }   
        })
    </script>
</body>
</html>